<template>
  <div class="main-box">
    <ProTable :columns="columns" ref="proRef" :requestApi="getBrokerList" rowKey="id">
      <template #tableHeader="scope">
        <el-button type="primary" @click="opera(undefined)">创建经纪人</el-button>
        <el-button type="danger" @click="deleteApi(scope.selectedListIds)" :disabled="scope.selectedListIds.length === 0"
          >批量删除</el-button
        >
      </template>
      <template #avatar="{ row }">
        <el-avatar :src="row.avatar" shape="circle" :size="100"></el-avatar>
      </template>
      <template #lous="{ row }">{{ row.louPan.length }}</template>
      <template #opera="{ row }">
        <div>
          <el-button type="primary" link :icon="GoldMedal" @click="sendGold(row.id)">赠予金币</el-button>
          <el-button type="primary" link :icon="EditPen" @click="opera(row)">编辑</el-button>
        </div>
      </template>
      <template #status="{ row }">
        <el-switch
          v-model="row.status"
          active-text="启用"
          inactive-text="禁用"
          inline-prompt
          @change="changeApi(row)"
        ></el-switch>
      </template>
    </ProTable>
    <brokerDrawer ref="brokerRef"></brokerDrawer>
    <goldDialog ref="goldRef"></goldDialog>
    <noPass ref="noRef"></noPass>
  </div>
</template>

<script setup lang="ts">
import { EditPen, GoldMedal } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import brokerDrawer from "../components/brokerDrawer.vue";
import { getBrokerList, createBrokerList, editBrokerList, changeStatus, deleteBroker } from "@/api/modules/broker";
import { ref } from "vue";
import noPass from "@/views/accountManage/components/noPass.vue";
import goldDialog from "../components/goldDialog.vue";
import { ElMessage } from "element-plus";
import { useHandleData } from "@/hooks/useHandleData";

const noRef = ref<InstanceType<typeof noPass> | null>();

const brokerRef = ref<InstanceType<typeof brokerDrawer> | null>();
const proRef = ref<InstanceType<typeof ProTable> | null>();

const columns: ColumnProps[] = [
  { type: "selection", width: 80 },
  { prop: "avatar", label: "头像", width: 150 },
  { prop: "realName", label: "姓名" },
  { prop: "phone", label: "手机" },
  { prop: "lous", label: "驻守楼盘" },
  { prop: "openId", label: "微信openid" },
  { prop: "status", label: "启用/禁用" },
  { prop: "accountExpand.score", label: "当前金币" },
  { prop: "opera", label: "操作", width: 350 }
];

const opera = (row: any) => {
  const params: any = {
    row: row
      ? row
      : {
          username: "",
          password: "",
          rePassword: "",
          avatar: "",
          phone: "",
          idCard: "",
          realName: "",
          status: true,
          louPan: []
        },
    api: row ? editBrokerList : createBrokerList,
    getTable: proRef.value?.getTableList
  };
  brokerRef.value?.acceptParams(params);
};

// const nowId = ref();

// const openLouPan = (row: any) => {
//   console.log(row);

//   const ids = row.louPan.map((e: any) => e.id);
//   nowId.value = row.id;
//   louRef.value?.acceptParams(ids);
// };

// const getCard = async (val: any) => {
//   try {
//     await operaLouPanApi({ ids: val, accountId: nowId.value });
//     ElMessage.success("成功");
//     proRef.value?.getTableList();
//   } catch (error) {}
// };

const goldRef = ref<InstanceType<typeof goldDialog> | null>();

const sendGold = (id: any) => {
  goldRef.value?.acceptParams({ id, getTable: proRef.value?.getTableList });
};

// 修改状态
const changeApi = async (val: any) => {
  try {
    await changeStatus(val);
    ElMessage.success("成功");
    proRef.value?.getTableList();
  } catch (error) {}
};

const deleteApi = async (ids: any) => {
  try {
    await useHandleData(deleteBroker, { ids }, "删除所选内容");
    proRef.value?.getTableList();
  } catch (error) {}
};
</script>

<style></style>
